<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>掉线处理2.0</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="./../js/index.js"></script>
    <script src="./../js/vue.js"></script>
    <style>
        table {
            word-break: break-all;
            word-wrap: break-word;
            table-layout: auto;
        }

        div {
            font-size: 1rem;
        }

        td {
            width: 10rem;
        }

        hr.red {
            border: none;
            /* 移除默认边框 */
            height: 3px;
            /* 线条高度 */
            background-color: rgb(255, 0, 0);
            /* 设置线条颜色 */
        }
    </style>
</head>

<body>


    <div id="app" class="container-sm">
        <h5>处理掉线数据</h5>
        <div class="form-group">
            <textarea class="form-control" rows="8" v-model="inputinfoStr" @keyup.enter="handleEnter" v-show="raw"
                placeholder="粘贴公司、车牌、最后在线时间、比对时间"></textarea>
        </div>
        <div style="height: 300px; overflow: auto;"  v-show="!raw">

            <div v-for="(item, index) in keysArray" :key="index">
                <label><input type="radio" name="option1" :value="item" v-model="selectKey"> {{
                    item }}</label>
            </div>

        </div>

        <hr class="red">
        <div  v-show="!raw">公司总数:{{keysArray.length}}</div>
        <br>
        <input class="form-control" :value="selectKey" id="selectKey" @click="copyText(3)">
        <div class="mb-3 mt-3">
            <label class="form-label">车辆总数:</label>
            <input class="form-control" v-model="totalNum" placeholder="输入总车辆数">

        </div>

        <div class="form-group">
            <label class="form-label">上线情况:</label>
            <textarea class="form-control" @click="copyText(1)" rows="6" v-model="OnlineSituation" id="OnlineSituation"
                placeholder="上线情况"></textarea>
        </div>
        <label class="form-label">监控建议:</label>
        <div class="form-group">
            <textarea class="form-control" @click="copyText(2)" rows="8" id="strf" v-model="strf"
                placeholder="监控建议"></textarea>
        </div>


    </div>


    <script>

        const app = new Vue({
            el: '#app',
            data: {
                offlineArray: [],
                offineInfo: {
                    carNum: '',
                    company: '',
                    licensePlate: '',
                    startTime: '',
                    endTime: ''
                },
                map: '',
                inputinfoStr: '',
                inputinfo: '',
                keysArray: [],
                selectKey: '',
                totalNum: '',
                strf: '',
                OnlineSituation: '',
                raw: true
            },

            created() {


            },
            mounted() {
                this.intervalId = setInterval(() => {
                    this.analyzeData()
                }, 1000); // 
            },
            beforeDestroy() {
                if (this.intervalId) {
                    clearInterval(this.intervalId);
                }
            },
            watch: {
                selectKey(newValue) {

                    this.strf = ''
                    this.OnlineSituation = ''
                    this.totalNum = ''
                    this.offlineArray = this.map.get(newValue)
                    console.log(this.offlineArray)
                    this.handleDisconnect()
                },
                totalNum(newValue) {
                    this.strf = ''
                    this.OnlineSituation = ''
                    console.log('totalNum==' + newValue)
                    // this.offlineArray = this.map.get(newValue)
                    // console.log(newValue)
                    this.handleDisconnect()
                }
            },

            methods: {
                analyzeData() {

                    this.inputinfoStr = this.inputinfoStr.trim();

                    if(this.inputinfoStr==''){

                        return false

                    }

                    // console.log(this.inputinfo)
                    let strArray = this.inputinfoStr.split(/\r\n|\n/)
                    this.map = new Map();

                    for (var i = 0; i < strArray.length; i++) {

                        if (strArray[i].trim() != "") {

                            let array = strArray[i].split('\t')
                            // console.log(array)
                            // console.log(this.map.has(array[0]))
                            this.offineInfo = {}
                            this.offineInfo.company = array[0]
                            this.offineInfo.licensePlate = array[1]
                            this.offineInfo.startTime = array[2]
                            this.offineInfo.endTime = array[3]
                            let arraytemp = []
                            if (this.map.has(array[0])) {
                                let arr = this.map.get(array[0])
                                arr.push(this.offineInfo)
                                this.map.set(array[0], arr);
                            } else {
                                arraytemp.push(this.offineInfo)
                                this.map.set(array[0], arraytemp);
                            }

                        }

                    }
                    // console.dir(this.map)
                    this.keysArray = Array.from(this.map.keys());
                    console.dir(this.keysArray)
                    this.inputinfoStr = ''
                    this.raw = false


                },
                handleEnter() {
                    this.analyzeData()
                },

                handleDisconnect() {
                    num1 = 0
                    num2 = 0
                    num3 = 0

                    var result = ""
                    var result1 = ""
                    var result2 = ""
                    var result3 = ""

                    for (var i = 0; i < this.offlineArray.length; i++) {

                        this.offineInfo = this.offlineArray[i]

                        if (this.offineInfo.licensePlate.indexOf('粤') == -1) {
                            return
                        }

                        var date1 = new Date(this.offineInfo.startTime);
                        var date2 = new Date(this.offineInfo.endTime);
                        var diffInMilliseconds = date2.getTime() - date1.getTime();
                        var diffInDays = Math.floor(diffInMilliseconds / (1000 * 60 * 60 * 24));
                        console.log(this.offineInfo.licensePlate + '相差天数：' + diffInDays);
                        if (diffInDays >= 1 && diffInDays < 3) {

                            result1 = result1 + this.offineInfo.licensePlate.trim() + ","
                            num1 = num1 + 1
                        }

                        if (diffInDays >= 3 && diffInDays < 7) {
                            result2 = result2 + this.offineInfo.licensePlate.trim() + ","
                            num2 = num2 + 1
                        }

                        if (diffInDays >= 7) {
                            result3 = result3 + this.offineInfo.licensePlate.trim() + ","
                            num3 = num3 + 1
                        }


                    }
                    result1 = result1.substring(0, result1.length - 1);
                    result2 = result2.substring(0, result2.length - 1);
                    result3 = result3.substring(0, result3.length - 1);


                    var strf = '1、今天掉线的车辆请留意：'
                    if (result1 != '') {
                        strf = strf + '（' + result1 + '）1-2天未上线；'
                    }

                    if (result2 != '') {
                        strf = strf + '（' + result2 + '）3天以上未上线；'
                    }
                    if (result3 != '') {
                        strf = strf + '（' + result3 + '）7天以上未上线，'
                    }
                    strf = strf + '请及时留意车辆运作情况进行核实，避免车辆脱离监控。'

                    this.strf = strf
                    if (this.totalNum.trim != '' && !isNaN(parseInt(this.totalNum))) {
                        var num = parseInt(this.totalNum);
                        var online = num - parseInt(num1) - parseInt(num2) - parseInt(num3)
                        var onlineStr = '当日委托监控的（' + num + '）辆车辆中，共有（' + online + '）辆车当日在线；（' + num1 + '）辆车1-2天未上线、（' + num2 + '）辆车连续3天未上线、（' + num3 + '）辆车连续7天未上线。'

                        this.OnlineSituation = onlineStr

                    }



                },
                copyText(flag) {

                    var select = ''
                    if (flag === 1) {
                        select = document.getElementById("OnlineSituation")

                    }

                    if (flag === 2) {
                        select = document.getElementById("strf")


                    }
                    if (flag === 3) {
                        select = document.getElementById("selectKey")


                    }
                    if (select.value === '') {
                        return

                    }


                    select.select(); //选中textarea中的内容
                    try {
                        var successful = document.execCommand('copy'); //执行复制命令
                        if (successful) {
                            console.log('成功复制！');


                        } else {
                            console.log('无法复制！');
                        }
                    } catch (err) {
                        console.error('无法复制！', err);
                    }
                }


            }
        })



    </script>

    <script src="../js/bootstrap.bundle.min.js"></script>
</body>

</html>